<template>
    <div class="bac">
        <!-- 自己封装的load组件 -->
        <load :show="recommend.length == 0?false:true"></load>
        <div v-if="recommend.length !== 0">
            <title-a>
            乐村淘特色
            </title-a>
            <div class="swiperbox">
                <swiper>
                    <div class="swiper-slide">
                        <img src="/libs/imgs/tese-banner.jpg" alt="" class="banner">
                    </div>
                </swiper>
            </div>

            <div class="tabbar">
                <ul>
                    <li>
                        <span @click="city">
                            <img src="/libs/imgs/icon1.png" alt="">
                        </span>
                        <b @click="city">城市大全</b>
                    </li>
                    <li>
                        <span @click="china">
                            <img src="/libs/imgs/icon2.png" alt="">
                        </span>
                        <b @click="china">汇聚中国</b>
                    </li>
                    <li>
                        <span @click="classify">
                            <img src="/libs/imgs/icon3.png" alt="">
                        </span>
                        <b @click="classify">全部分类</b>
                    </li>
                </ul>
            </div>

            <div class="teban">
                <img src="/libs/imgs/te-ban.png" alt="">
            </div>
            <div class="tuijian">
                <div class="bar">
                    <h3>优馆推荐</h3>
                    <p>弘扬传统文化 振兴民族品牌</p>
                </div>
                <div class="content">
                    <ul>
                        <li v-for="item in recommend" :key="item.pic_tename">
                            <img :src="item.pic_img" alt="">
                            <div class="small">
                                <h3>{{item.pic_name}}</h3>
                                <p>{{item.pic_tename}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="hot">
                <div class="bar">
                    <h3>热销产品</h3>
                    <p>弘扬传统文化 振兴民族品牌</p>
                </div>
                <ul>
                    <li v-for="item in hots" :key="item.goods_id">
                        <div class="img">
                            <img :src="item.goods_pic" alt="">
                        </div>
                        <div class="contents">
                            <div class="title">
                            {{item.goods_name}}
                            </div>
                            <div class="bottom">
                                <div class="price">
                                    <p class="price-a">￥<span class="price-b">{{item.goods_price}}</span></p>
                                    <p class="number">已售<span>3000</span>件</p>
                                </div>
                                <button class="shopcar">
                                    加入购物车
                                </button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="whatever">
                <div class="title">
                    <ul>
                        <router-link :to="item.path +'/'+ item.id" tag="li" v-for="item in whatever" :key="item.id" active-class="active">
                            {{item.msg}}
                        </router-link>
                    </ul>
                </div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      recommend: [],
      hots: [],
      whatever: [
        {
          id: 2,
          msg: '农特产品',
          path: '/home/teSeGuan/nt'
        },
        {
          id: 3,
          msg: '人文产品',
          path: '/home/teSeGuan/rw'

        },
        {
          id: 4,
          msg: '旅游产品',
          path: '/home/teSeGuan/ly'
        }
      ]
    }
  },
  mounted () {
    axios.post('/lct?api_version=te_1.0.0&platType=2&client=wap&isEncry=0&time=1583403227224&act=world&op=axios_pavilion', {
      api_version: 'te_1.0.0',
      platType: '2',
      client: 'wap',
      isEncry: '0',
      time: '1583403227224',
      act: 'world',
      op: 'axios_pavilion'
    }).then(res => {
      this.recommend = res.data.datas
    })

    axios.post('/lct?api_version=te_1.0.0&platType=2&client=wap&isEncry=0&time=1583403227224&act=world&op=axios_floors', {
      api_version: 'te_1.0.0',
      platType: '2',
      client: 'wap',
      isEncry: '0',
      time: '1583403227224',
      act: 'world',
      op: 'axios_floors'
    }).then(res => {
      this.hots = res.data.datas.goodslist
      console.log(this.hots)
    })
    this.isshow()
  },
  methods: {
    ...mapMutations(['isshow', 'ishide']),
    city () {
      this.$router.push('/address')
    },
    china () {
      this.$router.push('/home/teSeGuan/china')
    },
    classify () {
      this.$router.push('/classify')
      // this.$router.push({
      //     path:'/classify',
      //     query: {
      //         id: 1
      //     }
      // })
    }
  },
  destroyed () {
    this.ishide()
  }
}
</script>
<style lang="scss" scoped>
.whatever{
    .title{
        ul{
            height: 50px;
            display: flex;
            justify-content: space-around;
            li{
                font-size: 15px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
.active{
    border-bottom: 2px solid red;
    box-sizing: border-box;
    color: red;
}

.bac{
    width:100%;
    // height:100%;
    background:rgb(241, 241, 241);
    overflow: hidden;
}
.swiperbox{
    height: 200px;
    margin-top: 50px;
    .banner{
        width: 100%;
        height: 100%;
    }
}
.tabbar{
    width: 100%;
    height: 100px;
    // background: red;
    ul{
        height: 100%;
        display: flex;
        justify-content: space-around;
        li{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            span{
                border-radius: 50%;
                width: 45px;
                height: 45px;
                margin-bottom: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            b{
                font-size: 10px;
                color:rgb(146, 143, 143);
            }
        }
    }
}
.teban{
    width: 90%;
    height: 90px;
    margin: auto;
    margin-bottom: 13px;
    img{
        width: 100%;
        height: 100%;
    }
}
.tuijian{
    margin-bottom: 20px;
        .bar{
            height: 75px;
            background: #fff;
            padding-top: 20px;
            margin-bottom: 5px;
            h3{
                font-size: 20px;
                text-align: center;
                color: rgb(67, 111, 194);
                margin-bottom: 15px;
            }
            p{
                font-size: 10px;
                text-align: center;
            }
        }
        .content{
            width: 90%;
            height: 340px;
            margin: auto;
            ul{
                display: flex;
                width: 100%;
                height: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                li{
                    width: 49%;
                    height: 49%;
                    position: relative;
                    .small{
                        position: absolute;
                        width: 80%;
                        height: 40px;
                        background: rgba($color: #cc4b4b, $alpha: 0.8);
                        top: 100px;
                        left: 15px;
                        padding:5px;
                        h3{
                            font-size: 18px;
                            color:#fff;
                        }
                        p{
                            font-size: 12px;
                            color:#fff;
                        }
                    }
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
}
.hot{
    margin-bottom: 20px;
    .bar{
        height: 75px;
        background: #fff;
        padding-top: 20px;
         h3{
            font-size: 20px;
            text-align: center;
            color: rgb(67, 111, 194);
            margin-bottom: 15px;
        }
        p{
            font-size: 10px;
            text-align: center;
        }
    }
    ul{
        li{
            height: 130px;
            border-top: 1px solid #ccc;
            padding:7.5px;
            display: flex;
            .img{
                width: 120px;
                height: 100%;
                background: red;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .contents{
                width: 230px;
                .title{
                    color: #111111;
                    font-family: "微软雅黑";
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    display: -webkit-box;
                    font-size: 18px;
                }
                .bottom{
                    margin-top: 30px;
                    display: flex;
                    justify-content: space-between;
                    .price{
                        .price-a{
                            font-size: 14px;
                            .price-b{
                                font-size: 18px;
                                color: red;
                            }
                        }
                        .number{
                            font-size: 14px;
                            color: rgb(150, 144, 144);
                        }
                    }
                    .shopcar{
                        width: 85px;
                        height: 30px;
                        background: red;
                        font-size: 15px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
